<template>
  <div ref="myChart" style="height: 100%"></div>
</template>
<script>
export default {
  name: 'xmssPie',
  props: {
    types: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      myChart: undefined,
    }
  },
  created() {},
  mounted() {
    this.drawLine()
    window.addEventListener('resize', this.resize())
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      var rich = {
        name: {
          color: '#666666',
          fontSize: 14,
          padding: [8, 30, 5, 30],
          fontWeight: '400',
          align: 'left',
        },
        percent: {
          fontSize: 15,
          padding: [5, 30, 8, 30],
          fontWeight: '500',
          align: 'left',
        },
        hr: {
          borderColor: '#DFDFDF',
          width: '100%',
          borderWidth: 1,
          height: 0,
        },
      }
      var colorList = ['#0168b7', '#a665c1', '#fe7264', '#40c0db', '#f4943f']
      let num = this.types.length
        ? this.types.map((item) => {
            return item.value != null ? item.value : 0
          })
        : []
      let sum = num.length ? eval(num.join('+')) : 0
      let data = this.types.length ? this.types : []
      myChart.setOption({
        title: {
          text: `${sum}人`,
          textStyle: {
            color: '#3154a4',
            fontSize: 14,
          },
          top: '45%',
          left: '48%',
          textAlign: 'center',
        },
        color: colorList,
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: '#fff',
              },
            },
            minAngle: 10,
            type: 'pie',
            radius: ['38%', '65%'],
            center: ['50%', '50%'],
            label: {
              show: true,
              color:'rgba(0, 0, 0, .6)'
            },
            data: this.types || [
              {
                name: '已发',
                value: 10,
              },
              {
                name: '待办',
                value: 24,
              },
              {
                name: '已办',
                value: 3,
              },
            ],
          },
          {
            itemStyle: {
              normal: {
                color: '#fff',
                borderWidth: 1,
                borderColor: '#f4f4f4',
              },
            },
            type: 'pie',
            silent: true, //取消高亮
            radius: ['32%', '70%'],
            center: ['50%', '50%'],
            hoverAnimation: false, //取消动画效果
            data: this.types || [],
            label: {
              normal: {
                show: false,
                position: 'inner',
                formatter: (params) => {
                  return '{percent|' + params.percent.toFixed(0) + '%}'
                },
                rich: rich,
              },
            },
            z: -1,
          },
        ],
      })
      this.myChart = myChart
    },
    resize() {
      this.myChart.resize()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize())
  },
}
</script>

<style scoped>
</style>